<template>
	<div class="admin">
		<div class="admin-title">{{ t("accountManagement.title") }}</div>
		<ul class="account-info">
			<li class="account-info-item">
				<span class="account-info-item__label">{{ t("accountManagement.avatar") }}</span>
				<span class="account-info-item__value">
					<el-avatar size="large" :src="store.profile.avatar" />
				</span>
				<span class="account-info-item__action">
					<el-button :loading="uploadingAvatar" type="text" @click="handleUploadAvatar">{{ t("accountManagement.edit")
					}}</el-button>
				</span>
			</li>
			<li class="account-info-item">
				<span class="account-info-item__label">{{ t("accountManagement.nickname") }}</span>
				<span class="account-info-item__value">{{ store.profile.nickname }}</span>
				<span class="account-info-item__action">
					<el-button type="text" @click="showNickName = true">{{ t("accountManagement.edit") }}</el-button>
				</span>
			</li>
			<li class="account-info-item">
				<span class="account-info-item__label">{{ t("accountManagement.gender") }}</span>
				<span class="account-info-item__value">{{
					formateSexLabel(store.profile.sex)
				}}</span>
				<span class="account-info-item__action">
					<el-button type="text" @click="showGender = true">{{ t("accountManagement.edit") }}</el-button>
				</span>
			</li>
			<li class="account-info-item">
				<span class="account-info-item__label">{{ t("accountManagement.birthday") }}</span>
				<span class="account-info-item__value">{{
					formatDate(store.profile.loginDate)
				}}</span>
				<span class="account-info-item__action">
					<el-button type="text" @click="showBirthday = true">{{ t("accountManagement.edit") }}</el-button>
				</span>
			</li>
			<li class="account-info-item">
				<span class="account-info-item__label">{{ t("accountManagement.email") }}</span>
				<span class="account-info-item__value">{{ store.profile.email }}</span>
				<span class="account-info-item__action">
					<el-button type="text" @click="showEmail = true">{{ t("accountManagement.edit") }}</el-button>
				</span>
			</li>
			<li class="account-info-item">
				<span class="account-info-item__label">{{ t("accountManagement.phone") }}</span>
				<span class="account-info-item__value">{{ store.profile.mobile }}</span>
				<span class="account-info-item__action">
					<el-button type="text" @click="showPhone = true">{{ t("accountManagement.edit") }}</el-button>
				</span>
			</li>
			<li class="account-info-item">
				<span class="account-info-item__label">{{ t("accountManagement.password") }}</span>
				<span class="account-info-item__value"></span>
				<span class="account-info-item__action">
					<el-button type="text" @click="showPassword = true">{{ t("accountManagement.edit") }}</el-button>
				</span>
			</li>
			<!-- <li class="account-info-item">
				<span class="account-info-item__label">社交賬號</span>
				<span class="account-info-item__value"></span>
				<span class="account-info-item__action">
					<el-button type="text">修改</el-button>
				</span>
			</li> -->
			<li class="account-info-item">
				<span class="account-info-item__label">{{ t("accountManagement.logoutAccount") }}</span>
				<span class="account-info-item__value"></span>
				<span class="account-info-item__action">
					<el-button type="text" @click="showLogOut = true">{{ t("accountManagement.logoutAction") }}</el-button>
				</span>
			</li>
		</ul>
	</div>
	<profile-nick-name v-model="showNickName" />
	<profile-gender v-model="showGender" />
	<profile-birthday v-model="showBirthday" />
	<profile-email v-model="showEmail" />
	<profile-mobile-phone v-model="showPhone" />
	<profile-password v-model="showPassword" />
	<profile-log-out v-model="showLogOut" />
</template>

<script setup>
import { userStore } from '~/composables/store/modules/user';
import selectFile from '@/utils/file';
import { uploadFile } from '~/apis/web';
import { useI18n } from "vue-i18n";

definePageMeta({
	title: '账号管理',
	en_title: 'Account Management',
	zh_hk_title: '帳號管理',
	ssr: true, // 必须为 true
	isTokenCheck: true,
});

const { t } = useI18n();

const store = userStore();
const showNickName = ref(false);
const showGender = ref(false);
const showBirthday = ref(false);
const showEmail = ref(false);
const showPhone = ref(false);
const showPassword = ref(false);
const showLogOut = ref(false);
const uploadingAvatar = ref(false);

function formateSexLabel(sex) {
	switch (sex) {
		case 1:
			return t("accountManagement.genderMap.male");
		case 2:
			return t("accountManagement.genderMap.female");
		case 3:
			return t("accountManagement.genderMap.secret");
		default:
			return t("accountManagement.genderMap.unknown");
	}
}

async function handleUploadAvatar() {
	try {
		uploadingAvatar.value = true;
		const { files } = await selectFile({
			accept: 'image/*',
			multiple: false,
		});
		if (files.length) {
			const { code, data } = await uploadFile(files[0]);
			if (code == 0 && data) {
				await store.updateUserInfoAction({
					avatar: data,
				});
			}
		}
	} finally {
		uploadingAvatar.value = false;
	}
}

store.getUserInfoAction();
</script>

<style lang="less" scoped>
.account-info {
	list-style: none;
	margin: 0;
	padding: 0 20px;

	&-item {
		padding: 12px 0;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;

		&__label {
			font-weight: 500;
			color: #666;
			min-width: 120px;
			margin-right: 15px;
		}

		&__value {
			color: #333;
			flex: 1;
		}

		&__action {
			margin-right: 40px;
		}
	}
}
</style>
